<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
        长度单位
        像素： 
        屏幕实际上是有一个一个小点构成
        不同屏幕的像素点大小是不同的，像素点越小，屏幕的显示效果乐越清晰
         所以同样的200px在不同的设备下显示的效果不一样

         百分比：
           也可以将属性值设置为相对其父元素属性的百分比
           设置百分比，可以使子元素随着父元素的改变而改变

        em
            em 是相对于元素的字体大小来计算的
            1em = 1 font-size
            em会根据字体大小改变而改变

        rem  
           rem 是相对于根元素(html)的字体大小来计算 
           
         */
         

         .box1{
             width: 200px;
             height: 200px;
             background-color: orange;
         }
         .box2{
             width: 50%;
             height: 50%;
             background-color: aqua;
         }

         .box3{
             width: 10em;
             height: 10em;
             font-size: 10px;
             background-color: greenyellow;
         }

         .box4{
             width: 10rem;
             height: 10rem;
             background-color: purple;
         }

         html{
             font-size: 25px;
         }

    </style>
</head>
<body>
    <div class="box1" >
        
        <div class="box2"></div>
        
    </div>
    <div class="box3"></div>
    <div class="box4"></div>
</body>
</html>